import { h } from './../../lib/guide-coco-mini-vue.esm.js'
import { Foo } from './Foo.js'

window.self = null;
export const App = {
    name: "App",
    // ui 可以用 <template> 或者 render();

    // 必须要写 render 
    render() {
        // 用于测试组件代理对象，如： 获取$el , $data 等
        window.self = this;
        return h("div", {
            'id': 'div-test',
            'attr1': 'value1',
            'class': ['red']
        }, [
            h("p", { "id": 'p-test', 'class': 'green' }, "我的数据来自 setup : " + this.message),
            h("button", {
                onClick() {
                    console.log("触发了点击事件");
                },
                onMouseDown() {
                    console.log("出发了鼠标点击事件！");
                }
            }, "我是一个按钮，我有 onclick 事件"),
            h(Foo, { count: 999 , msg:this.message }),
            h("h1", { "id": 'h1-test', 'class': ['green', 'bg-black'] }, "我是h1标签"),
            h("ul", { "id": 'ul-test', class: ['red', 'bg-blue'] }, [
                h('li', { 'id': 'li-test-1', class: 'li-item' }, '我是li-01'),
                h('li', { 'id': 'li-test-2', class: 'li-item' }, '我是li-02'),
                h('li', { 'id': 'li-test-3', class: 'li-item' }, '我是li-03'),
            ]),
        ]);
    },

    setup() {
        // 可以返回一个函数，或者一个对象
        // 当返回 函数-> 则认为这个函数是 render 函数
        // 当返回一个对象，将这个对象挂载到这个 组件的实例上 
        return {
            message: '你好，欢迎使用 coco.mini.vue'
        }
    }
}